<template>
	<view class="userinfo">
		<!-- 设置对应的图片 -->
		<image :src="obj.avatar" mode="" class="avatar"></image>
		<!-- 设置文字描述 -->
		<view class="username">{{obj.name}}</view>
		<!-- <view>{{obj.name}}</view> -->
	</view>
</template>

<script setup>
import {computed} from "vue"
	
// 接受父类传过来的值
// const props = defineProps(['username','avatar'])
// console.log(props.username);
// console.log(props.avatar);

// const props = defineProps({
// 	// 字符串类型数据
// 	username:{
// 		// 设置默认值
// 		type:String,
// 		// 如果父类没有传值那些默认显示下面这个
// 		default:"默认值"
// 	},
// 	// 字符串类型数据
// 	avatar:{
// 		true:String,
// 		default:"../../static/logo.png"
// 	}
// })

// 用对象写父类传过来的值
defineProps({
	obj:{
		// 设置类型
		type:Object,
		// 设置接收值,没有接收到值那就输出下面这个值
		default(){
			return {
				name:"匿名",
				avatar:"../../static/logo.png"
			}
		}
	}
})






// 使用单项数据流进行修改
// 增加import {computed} from "vue"
// 给从父类返回回来的值增加常量进行赋值之后就可以正常输出了
// const myname = computed(()=>props.username+"@")

</script>

<style lang="scss" scoped>
.userinfo{
	width: 100%;
	height: 200px;
	background: #ccc;
	display: flex;
	flex-direction: column;
	// 设置上下居中
	justify-content: center;
	// 设置左右居中
	align-items: center;
	image{
		width: 100px;
		height: 100px;
		// 边角为50%
		border-radius: 50%;
	}
	.username{
		padding: 10px;
		font-size: 20px;
	}
}
</style>